<!DOCTYPE html>
<html>

<head lang="en">
    <title>攻略搜索页面</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/travel.css"/>
    <link rel="stylesheet" href="/css/strategy.css" />
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/common.js"></script>

</head>
<script>
    $(function () {
        //获取装载攻略数据的input框
        var currentInput = $("#currentPage");

        //创建用于存储攻略的数组
        var strategyArr = [];

        //攻略总页数
        var pages = 1;

        //接收请求参数
        var params = getParams();
        //处理传递中文乱码的问题
        params = decodeURI(params.text);

        //将传递过来的参数赋值给input框
        $("#strategyForm input[name='text']").val(params);

        //攻略
        function query(){
            var currentPage = currentInput.val();
            $("#strategyForm input[name='currentPage']").val(currentPage);

            $("#strategyForm").ajaxSubmit(function (data) {
                //合并两个数组到第一个参数数组上
                $.merge(strategyArr, data.result.list);
                //用于渲染时循环,循环时是取list的属性出来

                var json = {
                    list: strategyArr
                };
                if(data.success && data.result.list.length != 0){
                    $("#travelall").renderValues(json, {
                        getHref: function (item, value) {
                            //item是当前要渲染数据的元素(a),value就是render-key获取的值
                            //获取要跳转的地址
                            var href = $(item).data("href");
                            //把id拼接进去,再设置到a连接的href属性上
                            $(item).attr('href', href + value);
                        }
                    });
                }else {
                    $("#pills-1").html("无相关攻略")
                }
                //设置总页数
                pages = data.result.pages
            });
            //当前页input框+1
            currentInput.val(parseInt(currentPage) + 1);
        }

        //默认查询第一页的数据
        query();

        //当页面滚动条变化时，执行的函数
        $(window).scroll(function () {
            if ($(document).scrollTop() + $(window).height() >= $(document).height() -1 ){
                var currentPage = currentInput.val();
                //判断是否小于或等于最后一页,如果是就去查询
                if (currentPage <= pages) {
                    query();
                }else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已经到底了!',
                        autoClose: 500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }

        });

    })
</script>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>



<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" id="pills-1-tab" data-toggle="pill" href="#pills-1">
            <span style="font-weight: bold;">攻略</span>
        </a>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-1">
        <div class="container strategyDetails">
            <h6>相关攻略</h6>
            <form id="strategyForm" method="post" action="/seekall/selectstrategybyid">
                <input type="hidden" name="text" id="strategy">
                <input type="hidden" name="currentPage">
            </form>
            <div id="travelall">
                <div render-loop="list">
                    <div class="row detail">
                        <div class="col">
                            <a data-href="strategyDetails.html?id=" render-key="list.id" render-fun="getHref">
                                <h4 render-html="list.title"></h4>
                            </a>
                        </div>
                        <div class="col bigimg">
                            <a data-href="strategyDetails.html?id=" render-key="list.id" render-fun="getHref" >
                                <img render-src="list.coverUrl">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" name="currentPage" id="currentPage" value="1">
    </div>
</div>
</body>

</html>